<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}PinCaiCai 2.0{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f8f0 !important; /* Light green background */
            min-height: 100vh;
        }
        .navbar-brand { font-weight: bold; }
        .product-card { transition: transform 0.2s; }
        .product-card:hover { transform: translateY(-5px); }
        .footer { background-color: #f8f9fa; margin-top: 50px; }
        
        /* Fix navbar clickable area */
        .navbar-nav .nav-link {
            padding: 0.5rem 1rem;
            display: block;
            text-decoration: none;
        }
        
        .navbar-nav .nav-link:hover {
            background-color: rgba(0,0,0,0.1);
            border-radius: 0.375rem;
        }
        
        .dropdown-menu {
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .dropdown-item {
            padding: 0.5rem 1rem;
        }
        
        .dropdown-item:hover {
            background-color: #f8f9fa;
        }
        
        /* Fix cart quantity input display issue */
        .cart-quantity-input {
            width: 50px !important;
            text-align: center !important;
            font-size: 14px !important;
            padding: 0.25rem 0.5rem !important;
        }
        
        .cart-input-group {
            width: 120px !important;
            display: flex !important;
        }
        
        .cart-input-group .btn {
            padding: 0.25rem 0.5rem !important;
            font-size: 12px !important;
        }
    </style>
</head>
<body>
    <!-- Navigation bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-shopping-cart text-success"></i> PinCaiCai 2.0
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/all">All Products</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            Categories
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/vegetables">Vegetables</a></li>
                            <li><a class="dropdown-item" href="/meats">Meats</a></li>
                            <li><a class="dropdown-item" href="/fruits">Fruits</a></li>
                            <li><a class="dropdown-item" href="/seafood">Seafood</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/cart">
                            <i class="fas fa-shopping-cart"></i> Cart
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders">
                            <i class="fas fa-list-alt"></i> Orders
                        </a>
                    </li>
                    <!-- Display different menu items based on login status -->
                    <li class="nav-item" id="profile-menu" style="display: none;">
                        <a class="nav-link" href="/profile">
                            <i class="fas fa-user"></i> Profile
                        </a>
                    </li>
                    <li class="nav-item" id="login-menu">
                        <a class="nav-link" href="/login">
                            <i class="fas fa-sign-in-alt"></i> Login
                        </a>
                    </li>
                    <li class="nav-item" id="logout-menu" style="display: none;">
                        <a class="nav-link" href="#" onclick="logout()">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main content -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="footer py-4">
        <div class="container text-center">
            <p>&copy; 2024 PinCaiCai 2.0. Fresh ingredients, quality life.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Check user login status and update menu display
        function checkLoginStatus() {
            fetch('/api/profile')
                .then(response => {
                    if (response.ok) {
                        // User is logged in, show profile and logout buttons
                        document.getElementById('profile-menu').style.display = 'block';
                        document.getElementById('logout-menu').style.display = 'block';
                        document.getElementById('login-menu').style.display = 'none';
                    } else {
                        // User is not logged in, show login button
                        document.getElementById('profile-menu').style.display = 'none';
                        document.getElementById('logout-menu').style.display = 'none';
                        document.getElementById('login-menu').style.display = 'block';
                    }
                })
                .catch(error => {
                    console.log('Failed to check login status:', error);
                    // Default to showing login button
                    document.getElementById('profile-menu').style.display = 'none';
                    document.getElementById('logout-menu').style.display = 'none';
                    document.getElementById('login-menu').style.display = 'block';
                });
        }
        
        // Logout function
        function logout() {
            if (confirm('Are you sure you want to logout?')) {
                fetch('/api/logout', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        alert('Successfully logged out');
                        // Update menu display
                        checkLoginStatus();
                        // If currently on a page that requires login, redirect to home
                        if (window.location.pathname.includes('/profile') || 
                            window.location.pathname.includes('/orders')) {
                            window.location.href = '/';
                        }
                    } else {
                        alert('Logout failed: ' + (data.error || 'Unknown error'));
                    }
                })
                .catch(error => {
                    console.error('Logout failed:', error);
                    alert('Logout failed, please try again');
                });
            }
        }
        
        // Check login status when page loads
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html>
